<template>
  <div class="box">
    <div class="venuesHeader">
      <!-- 场馆头部 -->
      <el-input v-model="search" placeholder="搜索关键词" style="width: 15%;margin-right: 20px;margin-top: 10px;margin-left: 10px;" />
      <!-- 优惠券分类 -->
      <el-select
        v-model="Couponclassification"
        clearable
        placeholder="请选择类型"
        style="width: 12%; margin-right: 30px"
      >
        <el-option
          v-for="item in Couponclassificationlist"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary">查询</el-button>
      <el-button  @click="addcoupon">添加优惠券</el-button>
    </div>
    <div class="venuesTable">
      <!-- 场馆表格 -->
      <el-table :data="TableData" style="width: 100%" border >
        <el-table-column type="selection" width="55" />
        <el-table-column label="编号" prop="id" width="180"/>
        <el-table-column label="优惠券名称" prop="name" width="170" />
        <el-table-column label="支持课程" prop="courses"  width="280"/>
        <el-table-column label="类型" prop="coursestype" width="200" />
        <el-table-column label="面额" prop="Denomination"  width="80"/>
        <el-table-column label="数量" prop="num"  width="80"/>
        <el-table-column   label="操作">
          <template #default="scope">
            <el-button size="small"  type="text"  @click="handleEdit(scope.$index, scope.row)" >编辑</el-button>
            <el-button size="small" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <pagination
      :bulkOperationOptions="[
        {
          value: '课程券',
          label: '课程券',
        },
        {
          value: '商品券',
          label: '商品券',
        },
        {
          value: '删除',
          label: '删除',
        },
      ]"
    />
  </div>
  </div>

</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRouter } from "vue-router";
import Pagination from "../../components/Shop/Pagination.vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "ActivityPage",
  components: {
    Pagination
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    interface venuesUser {
      id:number
      name: string
      courses:string
      coursestype:string
      Denomination:string
      num:number

    }
    const search = ref('')
    const Couponclassification = ref('')
    const Couponclassificationlist = [
      {
        value: "课程券",
        label: "课程券",
      },
      {
        value: "商品券",
        label: "商品券",
      },
    ]
    const handleEdit = (index: number, row: venuesUser) => {
      console.log(index, row)
    }
    const handleDelete = (index: number, row: venuesUser) => {
      console.log(index, row)
    }
    const addcoupon = () => {
      router.push({ name: "addcoupon" })
    }
    const TableData = store.state.activityState.tableData
    
    return {
      Couponclassification,
      Couponclassificationlist,
      TableData,
      handleEdit,
      handleDelete,
      search,
      addcoupon
    }
  }
})

</script>

<style scoped>
.box{
  height: 100%;
  margin:50px;
  background-color: white;
}
.venuesHeader{
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>